//
// CSS Helper
// --------------------------------------------------

// Box-shadow

.no-shadow {
    box-shadow: none !important;
}

.bs-0 {
    .box-shadow-helper(0);
}
.bs-1 {
    .box-shadow-helper(1);
}
.bs-2 {
    .box-shadow-helper(2);
}
.bs-3 {
    .box-shadow-helper(3);
}
.bs-4 {
    .box-shadow-helper(4);
}
.bs-5 {
    .box-shadow-helper(5);
}

.bs-inset-default {
    box-shadow: inset 0 -3px 0 @gray !important;
}
.bs-inset-primary {
    box-shadow: inset 0 -3px 0 @primary !important;
}
.bs-inset-success {
    box-shadow: inset 0 -3px 0 @success !important;
}
.bs-inset-info {
    box-shadow: inset 0 -3px 0 @info !important;
}
.bs-inset-warning {
    box-shadow: inset 0 -3px 0 @warning !important;
}
.bs-inset-danger {
    box-shadow: inset 0 -3px 0 @danger !important;
}
.bs-inset-purple {
    box-shadow: inset 0 -3px 0 @purple !important;
}
.bs-inset-orange {
    box-shadow: inset 0 -3px 0 @orange !important;
}
.bs-inset-pink {
    box-shadow: inset 0 -3px 0 @pink !important;
}
.bs-inset-green {
    box-shadow: inset 0 -3px 0 @green !important;
}
.bs-inset-lime {
    box-shadow: inset 0 -3px 0 @lime !important;
}
.bs-inset-black {
    box-shadow: inset 0 -3px 0 @light-black !important;
}
.bs-inset-white {
    box-shadow: inset 0 -3px 0 @white !important;
}

//No Border Radius
.no-border {
    border: none !important;
}

// Background Cover
.bg-cover {
    .background-size(cover) !important;
}
.bg-op {
    background-color: rgba(0, 0, 0, .2) !important;
}

// Lineheight 
.lh-1 {
    line-height: 1 !important;
}

// Display Element
.inline-block {
    display: inline-block !important;
}
.inline {
    display: inline !important;
}
.block {
    display: block !important;
}


// Font weight
.fw- {
    .for(@font-weight); .-each(@value) {
        @name: extract(@value, 1);
        &@{name} {
            font-weight: extract(@value, 2) !important;
        }
    }
}

// Font size
.fs- {
    .for(@font-size); .-each(@value) {
        @name: extract(@value, 1);
        &@{name} {
            font-size: unit(extract(@value, 2), px) !important;
        }
    }
}

// Margin, margin-top, margin-right, margin-bottom, margin-left
// Padding, padding-top, padding-right, padding-bottom, padding-left
.m- {
    .for(@distance); .-each(@value) {
        @name: extract(@value, 1);
        &@{name} {
            margin: unit(extract(@value, 2), px) !important;
        }
    }
}
.mt- {
    .for(@distance); .-each(@value) {
        @name: extract(@value, 1);
        &@{name} {
            margin-top: unit(extract(@value, 2), px) !important;
        }
    }
}
.mr- {
    .for(@distance); .-each(@value) {
        @name: extract(@value, 1);
        &@{name} {
            margin-right: unit(extract(@value, 2), px) !important;
        }
    }
}
.mb- {
    .for(@distance); .-each(@value) {
        @name: extract(@value, 1);
        &@{name} {
            margin-bottom: unit(extract(@value, 2), px) !important;
        }
    }
}
.ml- {
    .for(@distance); .-each(@value) {
        @name: extract(@value, 1);
        &@{name} {
            margin-left: unit(extract(@value, 2), px) !important;
        }
    }
}
.p- {
    .for(@distance); .-each(@value) {
        @name: extract(@value, 1);
        &@{name} {
            padding: unit(extract(@value, 2), px) !important;
        }
    }
}
.pt- {
    .for(@distance); .-each(@value) {
        @name: extract(@value, 1);
        &@{name} {
            padding-top: unit(extract(@value, 2), px) !important;
        }
    }
}
.pr- {
    .for(@distance); .-each(@value) {
        @name: extract(@value, 1);
        &@{name} {
            padding-right: unit(extract(@value, 2), px) !important;
        }
    }
}
.pb- {
    .for(@distance); .-each(@value) {
        @name: extract(@value, 1);
        &@{name} {
            padding-bottom: unit(extract(@value, 2), px) !important;
        }
    }
}
.pl- {
    .for(@distance); .-each(@value) {
        @name: extract(@value, 1);
        &@{name} {
            padding-left: unit(extract(@value, 2), px) !important;
        }
    }
}